<template>
	<div class="business-instruct-wrapper" v-if="businessInstruct">
		<p class="title text-lf" v-if="!form.isEdit"><span>*</span> 请选择相关业务</p>
		<el-form-item :prop="`${prop}.type`">
			<div class="content text-lf boder">
				<template v-if="!form.isEdit">
					<div class="radio" v-for="item in businessData" :key="item.id">
						<el-radio :label="item.type" @input="changeType" :value="form.type">{{ item.title }}</el-radio>
						<span>{{ item.desc }}</span>
						<template v-if="form.type == item.type">
							<div class="radio-desc">
								<p class="tips" v-for="(tip, index) in item.tips" :key="index">
									{{ tip }}
								</p>
							</div>
						</template>
					</div>
					<!-- </el-form-item> -->
				</template>
				<template v-else>
					<div class="radio-desc">
						<p class="tips" v-for="(tip, index) in getTips" :key="index">
							{{ tip }}
						</p>
					</div>
				</template>
			</div>
		</el-form-item>
	</div>
</template>

<script>
export default {
	props: {
		businessInstruct: {
			type: Object,
			default: () => {}
		},
		prop: {
			type: String,
			default: () => '',
			required: true
		}
	},
	data() {
		return {
			form: {
				type: '',
				isEdit: false,
				fileName: '截取用户当前画面'
			},
			nextOptions: [],
			businessData: [
				{
					id: 1,
					type: 'send_capture',
					title: '截图',
					desc: '(AI客服截取访客的画面，可根据具体业务实时采集用户的画面信息!)',
					videoSrc: '',
					tips: ['客服发送截图指令到用户，用户那边提示请求截图。用户点击确定后，可将用户的画面保存到当前这通会话中']
				}
			],
			rules: {
				type: [{ required: true, message: '请选择相关业务', trigger: 'blur' }]
			}
		};
	},
	watch: {
		businessInstruct(val) {
			this.form = { ...this.form, ...val };
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.form = { ...this.form, ...this.businessInstruct };
			console.log(this.form, this.businessInstruct);
		});
	},
	computed: {
		getTips() {
			return this.businessData.filter(item => item.type === this.form.type).map(item => item.tips)[0];
		}
	},
	methods: {
		changeType(type) {
			console.log(type);
			this.form['type'] = type;
			this.$emit('input', this.prop, this.form);
			console.log(this.form, this.prop);
		}
	}
};
</script>

<style lang="less">
.el-dialog__header {
	border-bottom: 1px solid #eee;
}
.el-dialog__footer {
	border-top: 1px solid #eee;
}
.send-message .el-dialog {
	border-radius: 4px;
	box-shadow: 2px 2px 2px rgb(0 0 0 / 30%);
}
.send-message .disable {
	pointer-events: none;
}
.send-message .el-dialog__body {
	padding: 10px 20px;
}
.send-message .el-form-item__label {
	text-align: center;
	padding: 0;
}
.next-jump .el-form-item__label {
	text-align: left;
}
.send-message input {
	height: 32px;
}
.send-message {
	.content {
		.el-upload-list {
			padding: 10px 0px;
		}
	}
}
.send-message .el-form-item__content {
	line-height: 20px;
	margin: 0;
}
.send-message-box {
	.el-form-item__content {
		.content {
			width: 100%;
		}
	}
}
</style>

<style scoped lang="less">
.send-message .dialog-title {
	text-align: left;
}

.cancel {
	color: #999;
	background: #fff;
}
.title {
	padding: 10px 0;
}
.title span {
	color: red;
}
.content {
	padding: 10px 20px;
}
.el-radio-group {
	display: flex;
	flex-flow: column;
}
.el-radio {
	margin-right: 10px;
}
.upload-btn {
	border: 1px solid #d3d3d3;
	font-size: 12px;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 0 16px;
	height: 32px;
	line-height: 32px;
}
.tips {
	padding: 4px 20px;
	color: #999;
	line-height: 20px;
}
.radio-desc {
	padding-top: 8px;
}
.radio {
	padding: 10px;
}
.next-jump {
	padding: 10px 0;
	text-align: left;
	margin-left: 24px;
}
.next-jump .el-select {
	width: 90%;
}
</style>
